<script setup lang="ts">
import { ref, reactive } from 'vue'
//引入iconback组件
import iconBack from '@/components/icon-backto/index.vue'
//引入search组件
import searchModel from '@/components/search-model/index.vue'
//引入listitem组件
import listItem from './components/listitem.vue'
//引入api doGetCommodity 发送请求获取商品列表数据
import { doGetCommodity, doUpdateSellStatus, doDeleteCommodity } from '@/apis/good'

import { onLoad } from '@dcloudio/uni-app'
//引入类型
import { IGetCategoryList } from './type'
//引入mask组件
import shopMask from './components/shopmask.vue'
import { useShopInfoStore } from '@/store/modules/shopInfo/index'
//doGetLogisticsTemplateList获取物流模板列表
import { useScrollViewHeight } from '@/hooks'

const { scrollViewHeight } = useScrollViewHeight(false)

const ShopInfoStore = useShopInfoStore()
enum status {
    SELL_ON, // 上架
    SELL_OFF, //  下架
    PLATFORM_SELL_OFF, //  违规下架
    UNDER_REVIEW, //  审核中
}
//tabs 列表
const list = reactive([
    {
        name: '出售中',
    },
    {
        name: '已下架',
    },
    {
        name: '违规下架',
    },
])
//当前选中的tabs
const current = ref(0)
const checked = ref(false)
const maskshow = ref(false)

//商品列表数据
const shoplist = ref<IGetCategoryList[]>([])
//获取选中的商品id
const productIds = ref<string[]>([])
//分页
const Page = reactive({
    current: 1,
    size: 10,
})

onLoad(() => {
    uni.$emit('updateTitle')
    handleGetCommodity()
})

/**
 *  tabs切换
 * @param {*} index
 */
const change = async (index: number) => {
    Page.current = 1
    current.value = index
    console.log(current.value)
    handleGetCommodity()
}

/**
 *    上架商品
 */
const handleGoodsOnShelf = () => {
    //初始化store

    // 配送多选 暂时没有功能
    // store.SkusList.list.distributionModeList.forEach((item: any, index: number) => {
    //     if (index === 1 || index === 2) {
    //         item.checked = false
    //     }
    // })
    //跳转到上架商品页面
    uni.navigateTo({
        url: '/basePackage/pages/shopsSystemone/components/GoodsOnShelf',
    })
}
/**
 * 获取商品列表数据
 */

const handleGetCommodity = async (name = '', boo = false) => {
    // if (name) {
    const res = await doGetCommodity({
        status: status[current.value],
        ...Page,
        name: name,
    })
    console.log(res)
    if (res.code === 200) {
        //判断res.data.records是否为空
        if (boo) {
            if (res.data.records.length === 0) {
                uni.showToast({
                    title: '没有更多数据了',
                    icon: 'none',
                })
                return
            }
            shoplist.value = shoplist.value.concat(res.data.records)
            return
        }
        shoplist.value = res.data.records
    }
}

/**
 * 选择需要上下架的商品 多选组件回调函数
 */
const checkboxChange = (e: any) => {
    productIds.value = e.detail.value
    // console.log(productIds.value)
}
/**
 * 改变遮罩层的显示状态
 */
const handleMaskShow = () => {
    maskshow.value = !maskshow.value
}
/**
 * 上下架商品
 */
const handleUpdateSellStatus = async () => {
    if (productIds.value.length === 0) {
        uni.showToast({
            title: '请选择商品',
            icon: 'none',
        })
        return
    }
    let ids = productIds.value.map((item) => ({ shopId: ShopInfoStore.shopInfo.id, productId: item }))
    if (current.value === 0) {
        const res = await doUpdateSellStatus(ids, status[1])
        if (res.code === 200) {
            Page.current = 1
            uni.showToast({
                title: '下架成功',
                icon: 'none',
            })
            handleGetCommodity()
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none',
            })
        }
    } else if (current.value === 1) {
        const res = await doUpdateSellStatus(ids, status[0])
        if (res.code === 200) {
            Page.current = 1
            uni.showToast({
                title: '上架成功',
                icon: 'none',
            })
            handleGetCommodity()
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none',
            })
        }
    }
}
/**
 *  删除商品
 */
const handleDeleteShop = async () => {
    if (productIds.value.length === 0) {
        uni.showToast({
            title: '请选择商品',
            icon: 'none',
        })
        return
    }
    const res = await doDeleteCommodity(productIds.value)
    if (res.code === 200) {
        Page.current = 1
        uni.showToast({
            title: '删除成功',
            icon: 'none',
        })
        handleGetCommodity()
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none',
        })
    }
}
/**
 * 搜索商品
 */
const handleSearchShop = (e: any) => {
    console.log(e)
    handleGetCommodity(e)
}
/**
 * 滑动到底部加载更多
 */
const handleScrollBottom = async () => {
    Page.current++
    handleGetCommodity('', true)
}
</script>

<template>
    <view class="content" :style="{ height: `${scrollViewHeight}` }">
        <view class="content__header">
            <icon-back style="margin-right: 30rpx" :url="'/pages/user/index'" :type="2"></icon-back>
            <search-model :title="'根据商品名称搜索'" :searchtype="2" @search-enter="handleSearchShop"></search-model>
        </view>
        <view class="content__body">
            <view>
                <u-tabs
                    v-model="current"
                    :list="list"
                    height="130"
                    active-color="#333333"
                    inactive-color="#999999"
                    bar-height="12"
                    font-size="28"
                    bg-color="#F6F6F6"
                    :bar-style="{ backgroundColor: '#4755E9' }"
                    :is-scroll="false"
                    @change="change"
                ></u-tabs>
            </view>
            <!-- 商品展示模块 -->
            <view class="content__body--shoplist">
                <scroll-view class="main" :scroll-y="true" @scrolltolower="handleScrollBottom">
                    <checkbox-group @change="checkboxChange">
                        <template v-for="item in shoplist" :key="item">
                            <view class="main__check">
                                <view class="main__check--left">
                                    <checkbox :value="item.id" :checked="checked" />
                                </view>
                                <list-item :shopitem="item" :current="current"></list-item>
                            </view>
                        </template>
                    </checkbox-group>
                </scroll-view>
            </view>
            <view class="content__body--bottom">
                <!-- 上架商品按钮 -->
                <!-- <view class="content__body--operate" @click="handleGoodsOnShelf">
                    <u-icon name="huojian" custom-prefix="icon" class="iconfont" size="40" color="#4755E9"></u-icon>
                    发布商品
                </view> -->
                <view class="content__body--operate" style="margin-left: auto" @click="handleMaskShow">
                    <u-icon name="fenlei" custom-prefix="icon" class="iconfont" size="38" color="#4755E9"></u-icon>
                    批量操作
                </view>
                <shop-mask
                    :maskshow="maskshow"
                    :status="status[current]"
                    @update-sell="handleUpdateSellStatus"
                    @change-mask="handleMaskShow"
                    @delete-shop="handleDeleteShop"
                ></shop-mask>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(content) {
    display: flex;
    flex-direction: column;
    padding: 0 12rpx 0 16rpx;
    @include e(header) {
        padding: 20rpx 0 0 0;
        display: flex;
    }
    @include e(body) {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        @include m(shoplist) {
            height: calc(100% - 130rpx - 118rpx);
        }
        @include m(bottom) {
            border-radius: 20rpx;
            background-color: rgba(255, 255, 255, 1);
            padding: 20rpx 36rpx 20rpx 42rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        @include m(operate) {
            width: 204rpx;
            height: 78rpx;
            border-radius: 20rpx;
            background-color: rgba(232, 234, 255, 1);
            text-align: center;
            border: 2rpx solid rgba(212, 216, 255, 1);
            display: flex;
            align-items: center;
            padding: 0 12rpx 0 24rpx;
            font-size: 26rpx;
            color: #4755e9;
            justify-content: space-around;
        }
        @include m(edit) {
            width: 78rpx;
            height: 78rpx;
            line-height: 78rpx;
            border-radius: 20rpx;
            background-color: rgba(232, 234, 255, 1);
            text-align: center;
            border: 2rpx solid rgba(212, 216, 255, 1);
        }
    }
}
@include b(datalist) {
    display: flex;
    flex-direction: column;
    padding: 32rpx 28rpx 28rpx 32rpx;
    font-size: 26rpx;
}
@include b(main) {
    height: 100%;
    @include e(check) {
        display: flex;
        align-items: center;
        @include e(left) {
            width: 80rpx;
        }
    }
}
</style>
